<template>
	<view>
		<view style="padding: 30rpx;position: sticky;top: 0;z-index: 3;background-color: #F5F9FC;">
			<map id="map1" style="width: 690rpx;" scale="16" :longitude="longitude" :latitude="latitude"
				:markers="markers" :show-location="false"></map>
		</view>
		<view class="bg-FF pd-30" style="margin:0 30rpx;">
			<u-form :model="form" ref="uForm" label-width="120">
				<u-form-item label="出发地"><u-input v-model="form.StartSiteName" :disabled="true" input-align="right"
						placeholder="" /></u-form-item>
				<u-form-item label="目的地"><u-input v-model="form.EndSiteName" :disabled="true" input-align="right"
						placeholder="" /></u-form-item>
				<u-form-item label="出发时间"><u-input v-model="form.StartTime" :disabled="true" input-align="right"
						placeholder="" /></u-form-item>
				<u-form-item label="结束时间"><u-input v-model="form.EndTime" :disabled="true" input-align="right"
						placeholder="" /></u-form-item>
				<u-form-item label="出行人数"><u-input v-model="form.PeopleCount" :disabled="true" input-align="right"
						placeholder="" /></u-form-item>
				<u-form-item label="车辆类型"><u-input v-model="CarType" :disabled="true" input-align="right"
						placeholder="" /></u-form-item>
				<u-form-item label="包车数量"><u-input v-model="form.CoachCount" :disabled="true" input-align="right"
						placeholder="" /></u-form-item>
				<u-form-item label="联系人"><u-input v-model="form.PassengerName_DES" :disabled="true" input-align="right"
						placeholder="" /></u-form-item>
				<u-form-item label="联系电话"><u-input v-model="form.PassengerPhone_DES" :disabled="true"
						input-align="right" placeholder="" /></u-form-item>
				<u-form-item label="是否往返"><u-switch slot="right" v-model="form.IsBack"
						:disabled="disabled"></u-switch></u-form-item>
				<u-form-item label="状态"><u-input v-model="form.State" :custom-style="customStyle" :disabled="true"
						input-align="right" placeholder="" /></u-form-item>
				<u-form-item label="备注" label-position="top">
					<textarea v-model="form.remark" :disabled="true"
						style="border: 1rpx solid #eee;width: auto;padding: 10rpx;"></textarea>
				</u-form-item>
			</u-form>
			<view style="height: 30rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: [],
				longitude: '',
				latitude: '',
				form: {},
				CarType: '',
				disabled: false,
				customStyle: {
					'font-size': "32rpx",
					color: '#2979ff',
					'font-weight': "700"
				}
			}
		},
		onLoad(option) {
			this.form = JSON.parse(option.param);
			this.form.StartTime = this.form.StartTime.replace("T", " ").substring(0, 16);
			this.form.EndTime = this.form.EndTime.replace("T", " ").substring(0, 16);
			this.form.State = this.form.State == 1 ? "待受理" : (this.form.State == 2 ? '已受理' : (this.form.State == 3 ?
				'已取消' : ""));
			this.form.PeopleCount = this.form.PeopleCount + "人";
			this.form.CoachCount = this.form.CoachCount + "辆";
			this.disabled = true;
			this.getPriceList();
			this.setMarkers(this.form.StartLoction, this.form.EndLoction)
		},
		methods: {
			//获取车辆价格
			getPriceList: function() {
				var that = this;
				uni.request({
					url: 'https://chuxing.mbxing.com/api/CharteredBus/GetPriceList',
					method: "POST",
					success(res) {
						if (res.data.IsSuccess) {
							for (var i = 0; i < res.data.Data.length; i++) {
								if (res.data.Data[i].AID == that.form.PriceID) {
									that.CarType = res.data.Data[i].CoachTypeName.split(";")[0]
								}
							}
						}
					}
				})
			},
			//------------------------------规划路线-----------------------------
			setMarkers: function(start, end) {
				//设置始末标点
				var that = this;
				that.latitude = start.split(",")[1];
				that.longitude = start.split(",")[0];
				var startmarker = {
					//起点
					id: 0,
					longitude: start.split(",")[0],
					latitude: start.split(",")[1],
					iconPath: '../static/positionstart.png',
					width: 33,
					height: 40,
					callout: {
						content: this.form.StartSiteName,
						borderRadius: 10,
						padding: 10,
						display: "ALWAYS",
						textAlign: 'center'
					}
				};
				var endmarker = {
					id: 1,
					longitude: end.split(",")[0],
					latitude: end.split(",")[1],
					iconPath: '../static/positionend.png',
					width: 33,
					height: 40,
					callout: {
						content: this.form.EndSiteName,
						borderRadius: 10,
						padding: 10,
						display: "ALWAYS",
						textAlign: 'center'
					}
				};
				that.markers = [];
				that.markers.push(startmarker);
				that.markers.push(endmarker);
			},
		}
	}
</script>

<style>

</style>